<template>
  <div id="login-page">
    <transition appear
      appear-active-class="animated swing">
      <div class="container">
        <div class="form-login" >
          <h2 class="form-login-heading">{{head_message}}</h2>
          <div class="login-wrap">
            <input type="text" class="form-control" v-bind:placeholder="user_name" v-model.trim="submit_name" autofocus>
            <br>
            <input type="password" class="form-control" v-bind:placeholder="pass_word" v-model.trim="submit_pass">
            <label class="checkbox">
              <!-- <input type="checkbox" value="remember-me"> Remember me -->
              <span class="pull-right">
              <!-- <a data-toggle="modal" href="login.html#myModal">{{forgot_password}}</a> -->
              </span>
            </label>
            <button class="btn btn-theme btn-block mybtn" v-bind:disabled="isok" @click="readyLogin"><i class="fa fa-lock"></i>  {{submit}}</button>
          </div>       
          <div class="foot-ganzi">2019@IGUICOO</div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import crypto from 'crypto'
  export default {
    name: 'login',
    data () {
      return {
        head_message: '云归谷远程控制系统',
        user_name:'用户名',
        pass_word:'密码',
        forgot_password:'忘记密码',
        submit:'登录',
        submit_name:'',
        submit_pass:'',
        isok:false,
      }
    },
    methods:{
      readyLogin:function(){
        var that = this;
        if (!this.submit_name) {
            this.$options.methods.showToast('请输入用户名!')
            return false
        }
        if (!this.submit_pass) {
            this.$options.methods.showToast('请输入密码名!')
            return false
        }
        that.isok = true;
        this.$axios.post('ganzi-server/user/readylogin', {
          userName: this.submit_name
        })
        .then(function (response) {
          if(response.data.code == 200){
            if(response.data.data){
              var salt = response.data.data.salt
              var random = response.data.data.random
              var md5 = crypto.createHash("md5").update(that.submit_pass+':'+salt)
              var b = crypto.createHash("md5").update(md5.digest('base64')).digest('base64')
              var passRandom = crypto.createHash("md5").update(b+':'+random).digest('base64')+random
              that.loginCommit(that.submit_name,passRandom)
            }else{
              that.isok = false;
            }
          }else{
            that.$options.methods.showToast(response.data.msg)
            that.isok = false;
          }
        })
        .catch(function (error) {
          if(error.response && error.response.data.status == 4001){
            sessionStorage.clear();
            that.$router.push({path: '/'})
          }else if(error.response && error.response.data.status == 4002){
            sessionStorage.clear();
            that.$options.methods.showToast('您的账号在其他地方登录,如非本人操作，请立即修改密码！')
            that.$router.push({path: '/'})
          }else{
            that.$options.methods.showToast('系统异常!')
          }
          that.isok = false;
        });
        return true;
      },
      loginCommit(name,pass){
        var that = this
        this.$axios.post('ganzi-server/user/login', {
          json:{
            userName: name,
            password: pass
          }
        })
        .then(function (response) {
          if(response.data.code == 200){
            sessionStorage.setItem('shiro-token',response.data.data.token);
            that.$router.push({path: '/index'})
          }else{
            that.$options.methods.showToast(response.data.msg)
          }
          that.isok = false;
        })
        .catch(function (error) {
          that.$options.methods.showToast('系统异常!')
          that.isok = false;
        });
      },
      showToast:function(msg){
        $.alert({
          title: '消息!',
          content: msg,
          confirmButton: '确定',
          confirmButtonClass: 'btn-warning',
          backgroundDismiss: false,
          confirm: function(){
          }
        });
      }
    }
  }
</script>

<style scoped>
  @import "../assets/css/login.css";
  @import "../assets/css/animate.css";
</style>
